import { h, Component } from 'preact';

import { createDrag } from '../../util/drag';

class Dragable extends Component {

  constructor() {
    super();

    this.dragHandler = createDrag({
      onDraging: this.onDraging,
    });
  }

  onDraging = ({ deltaX, deltaY }) => {
    const { model } = this.props;
    model.x += deltaX;
    model.y += deltaY;
  }

  render() {
    const { children } = this.props;
    return (
      <g
        className="dragable"
        onMouseDown={this.dragHandler}
      >
        {children}
      </g>
    );
  }

}

export default Dragable;
